css3 transitionアニメーション
2011.11.20
この記事は最終更新日から1年以上が経過しています。
css3ではtransitionプロパティを用いて時間的変化をつける事が可能となります。
transition (時間的変化をまとめて指定)
transitionプロパティは、transition効果(時間的変化)をまとめて設定する場合に使用します。
transition: all 0.6s linear 0;
-moz-transition: all 0.6s linear 0; -webkit-transition: all 0.6s linear 0;
transition: all(※1) 0.6s(※2) linear(※3) 0(※ 4);
※1 適応するcssプロパティの設定(backgroung,borderなど個別で指定可)
※2 変化にかかる時間。
※3 変化の仕方(linearは一定。)
※4 アニメーションを始めるタイミング(0だとすぐスタートします。)
デモページ
↓ 個別で指定する場合 ↓
transition-property(時間的変化を適応するCSSプロパティ指定)※1
transition-propertyプロパティは、transition(時間的変化)効果を適用するCSSプロパティ名を指定する場合に使用します。
all : 変化を適用できるプロパティすべてが変化(初期値)
none : どのプロパティも変化させない
プロパティ名 : 変化させるプロパティ名のリストをカンマ( , )区切りで指定
例:
transition-property: background-color, color,width; -webkit-transition-property: background-color, color,width;
まとめて指定 transition: all 0.6s linear 0;
デモページ
transition-duration (変化に掛かる時間を指定)※2
transition-durationプロパティは、変化に掛かる時間を指定する場合に使用します。
時間 : 変化に掛かる時間を指定(初期値は0)
例:
transition-duration:1s; -webkit-transition-duration:1s;
まとめて指定 transition: all 0.6s linear 0;
デモページ
transition-timing-function (変化のタイミング・仕方を指定) ※3
transition-timing-functionプロパティは、変化のタイミング・仕方を指定する場合に使用します。
ease : 開始と完了を滑らかにする(初期値)
linear : 一定
ease-in : ゆっくり始まる
ease-out : ゆっくり終わる
ease-in-out : ゆっくり始まってゆっくり終わる
cubic-bezier(数値, 数値, 数値, 数値) : 数値による指定
例:
transition-timing-function:ease-in-out; -webkit-transition-timing-function:ease-in-out;
まとめて指定 transition: all 0.6s linear 0;
デモページ
transition-delay (変化がいつ始まるかを指定)※4
transition-delayプロパティは、変化がいつ始まるかを指定する場合に使用します。
時間 : 変化が始まる時間を指定(初期値は0)
例:
transition-delay:3s; -webkit-transition-delay:3s;
まとめて指定 transition: all 0.6s linear 0;